<template>
    <div class="m-login">
        <mu-linear-progress v-show="isRequesting" />
        <h3>登录</h3>
        <form action="#">
            <mu-text-field hintText="用户名" v-model="username" />
            <mu-text-field hintText="密码" v-model="password" type="password" />
            <div class="checkbox-wrap">
                <mu-checkbox label="记住我" class="demo-checkbox" v-model="isChecked" />
                <div class="tip">还没有账号？点此
                    <a @click="switchLoginToRegist">注册</a>
                </div>
            </div>
    
            <div class="button-wrap">
                <mu-raised-button label="登录" class="demo-raised-button" primary @click="login" />
            </div>
        </form>
    
    </div>
</template>

<script>
import storage from '../utils/storage'
import axios from 'axios'
export default {
    name: 'loginForm',
    data() {
        return {
            username: storage.get('loginInfo').isChecked ? storage.get('loginInfo').username : '',
            password: '',
            isChecked: storage.get('loginInfo').isChecked || false,
            isRequesting: false
        }
    },
    computed:{
      
    },
    methods: {
        switchLoginToRegist() {
            this.$router.push({ name: 'RegistForm' })
        },
        login() {
            this.checkInput()
                .then(function () {
                    this.sendLoginRequest();
                }.bind(this))
        },
        checkInput() {
            return new Promise(function (resolve, reject) {
                if (!this.username) {
                    this.$store.commit('SNACK_BAR_CHANGE', {
                        snackbar: true,
                        snackMsg: 'Username is required'
                    })
                    return;
                }
                if (!this.password) {
                    this.$store.commit('SNACK_BAR_CHANGE', {
                        snackbar: true,
                        snackMsg: 'password is required'
                    })
                    return;
                }
                this.isRequesting = true;
                resolve();
            }.bind(this))
        },
        sendLoginRequest() {
            axios.post('api/session', {
                username: this.username,
                password: this.password
            }).then(function (res) {
                this.isRequesting = false;
                this.handleResult(res);
            }.bind(this)).catch((err) => {
                console.log('catch');
                this.isRequesting = false;
                this.$store.commit('SNACK_BAR_CHANGE', {
                    snackbar: true,
                    snackMsg: 'Sorry, there is something wrong with the server.'
                })
            })
        },
        saveLoginInfo(user) {
            var username = this.username;
            var isChecked = this.isChecked;
            var avatar = user.avatar;
            // 保存用户信息
            storage.set('loginInfo', {
                isChecked: isChecked,
                username: username,
                avatar: avatar
            })
           
        },
        saveToken(token){
            // 更新本地token
            storage.set('token', token)
            // 更新state
            this.$store.commit('TOKEN_CHANGE',{
                token: token
            })
        },
        saveUser(username){
            // 更新state
            this.$store.commit('USERNAME_CHANGE',{
                username: username
            })
        },
        handleResult(res) {
            console.log(res);
            // 登陆失败
            if (res.data.code != 0) {
                this.msg = res.data.msg;
                this.$store.commit('SNACK_BAR_CHANGE', {
                    snackbar: true,
                    snackMsg: this.msg
                });
                return
            }
             // 更新User State
            this.saveUser(res.data.username)
            // 更新token State
            this.saveToken(res.data.token)
            // 保存登陆信息、更新token
            this.saveLoginInfo(res.data);
            // 跳转
            this.$router.push({ name: 'Home' })
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.mu-text-field {
    width: 300px;
}

.mu-linear-progress {
    position: absolute;
    top: 0;
}

.m-login {
    position: relative;
    box-sizing: border-box;
    padding: 20px 0;
    width: 400px;
    height: 600px;
    background-color: #fff;
    text-align: center;
    .checkbox-wrap {
        position: relative;
        box-shadow: none;
        width: 300px;
        margin: 0 auto;
        &::after {
            content: "";
            display: block;
            height: 0px;
            visibility: hidden;
            clear: both;
        }
        label {
            width: 30%;
            float: left;
            text-align: left;
        }
        .tip {
            width: 70%;
            float: right;
            padding: 4px 0;
            text-align: right;
        }
    }
    .button-wrap {
        width: 300px;
        margin: 0 auto;
        text-align: right;
        margin-top: 30px;
    }
}
</style>
